// 客户端应用程序和服务器应用程序，都要使用 webpack 打包 - 服务器需要「服务器 bundle」然后用于服务器端渲染(SSR)，而「客户端 bundle」会发送给浏览器，用于混合静态标记。
const fs = require('fs');
const express = require('express');
const server = express();

// 使用客户端清单(client manifest)和服务器 bundle(server bundle)，renderer 现在具有了服务器和客户端的构建信息，因此它可以自动推断和注入资源预加载 / 数据预取指令(preload / prefetch directive)，以及 css 链接 / script 标签到所渲染的 HTML。
// const serverBundle = require('/path/to/vue-ssr-server-bundle.json');
const clientManifest = require('/path/to/vue-ssr-client-manifest.json');

const createApp = require('./app');
const { createRenderer, createBundleRenderer } = require('vue-server-renderer');

// const renderer = createRenderer({
//   template: fs.readFileSync('./index.template.html', 'utf-8') // 同步读取文件
// });

const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // 推荐
  template: fs.readFileSync('./index.template.html', 'utf-8'), // （可选）页面模板
  clientManifest // （可选）客户端构建 manifest
})

server.get('*', (req, res) => {
  console.log(req.headers);
  const context = { url: req.url };
  const app = createApp(context);
  // renderer.renderToString(app, (err, html) => {
  //   if (err) throw err;
  //   res.send(html);
  // });
  // res.send(`hello world ${req.url}`);
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
});

server.listen('9999', '127.0.0.1', () => {
  console.log('server start');
});